<template>
  <div>
    <el-card style="width: auto;margin:10px" shadow="always">
      <div>欢迎您，{{ data.user.name }} 祝您今天过得开心！</div>
    </el-card>
    <div class="card-container">
      <el-card v-for="item in cardItems" :key="item.id" style="width: 140px;margin:10px" shadow="always">
        <img :src="item.avatar" style="width: 100px;height: 100px;border-radius: 50%">
        <div align="center" style="color: darksalmon">{{ item.name }}</div>
        <div align="center" style="color: navy">{{ item.position }}</div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import request from "@/utils/request";

const cardItems = reactive([])

load();

function load() {
  request.get("/doctor/selectAll").then(res => {
    if (res.code == 200) {
      for (var i = 0; i < res.data.length; i++) {
        cardItems.push(res.data[i]);
      }
    }
  })
}

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
})
</script>

<style lang="scss" scoped>
.card-container {
  display: flex;
  flex-wrap: wrap;
}
</style>